<template>
  <div>
    <el-card class="box-card">
      <div class="top">
        <el-form ref="form" :model="form" :rules="rules">
          <el-descriptions :colon="false">
            <el-descriptions-item label="员工帐号:">
              <el-form-item prop="account">
                <el-input v-model="form.account" placeholder="请输入员工帐号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="员工姓名:">
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入员工姓名" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="工作模式:" label-class-name="organ">
              <el-form-item prop="workStatus">
                <el-select
                  v-model="form.workStatus"
                  placeholder="请选择工作模式"
                  style="width:100%"
                  clearable
                >
                  <el-tree
                    node-key="id"
                    :data="jobData"
                    class="add_tree"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                  >
                    <span slot-scope="{data}" class="custom-tree-node">
                      <el-option
                        style="padding: 0"
                        :label="data.name"
                        :value="data.id"
                      /></span></el-tree>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="月份:">
              <el-form-item prop="date1">
                <el-date-picker v-model="form.date1" type="date" placeholder="选择月份" />
                <el-col class="line">-</el-col>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="所属机构:" label-class-name="organ">
              <el-form-item prop="agentId">
                <el-select
                  v-model="form.agentId"
                  placeholder="请选择所属机构"
                  style="width:100%"
                  clearable
                >
                  <el-tree
                    node-key="id"
                    :data="treeData"
                    class="add_tree"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                  >
                    <span slot-scope="{data}" class="custom-tree-node">
                      <el-option
                        style="padding: 0"
                        :label="data.name"
                        :value="data.id"
                      /></span></el-tree>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="btnGroup">
              <el-button type="primary" @click="btnSearch">搜索</el-button>
              <el-button @click="btnReset">重置</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>

      <!-- 表格 -->
      <div>
        <el-button type="primary" @click="goBack">排班设置</el-button>
        <el-button>绑定排班</el-button>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="employeeNumber"
            label="员工账号"
          />
          <el-table-column
            prop="name"
            label="员工姓名"
          />
          <el-table-column
            prop="phone"
            label="员工电话"
          />
          <el-table-column
            prop="userType"
            label="员工角色"
          >
            <template v-slot="scoped">
              <span>{{ scoped.row.userType>2?'司机':'快递员' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="workPatternName"
            label="当前工作模式"
          />
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          :current-page="tableParams.page * 1"
          :page-sizes="[10,20,50,100]"
          :page-size="tableParams.pageSize * 1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
  </div>
</template>

<script>
import { getGrade, getOrganization, getSchema } from '@/api/employee'
export default {
  data() {
    return {
      multipleSelection: [],
      radio: '1', // 单选框
      // 表格数据
      tableData: [],
      total: 0, // 总数据
      // 表格数据请求参数
      tableParams: {
        page: 1,
        pageSize: 10
      },
      // 树形控件数据
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      treeData: [],
      label: '',
      selectOption: '',
      form: {
        account: '',
        agentId: -1 && '',
        name: '',
        workStatus: ''

      },
      rules: {
        account: [],
        agentId: [],
        name: [],
        date1: [],
        workStatus: []
      },
      jobData: []
    }
  },
  created() {
    this.getList()
    this.getSelect()
    this.getWork()
  },
  methods: {
    // 获取表格数据
    async getList() {
      const result = await getGrade(this.tableParams)
      this.tableData = result.data.items
      this.total = +result.data.counts
      console.log(result)
    },
    // 分页器
    handleSizeChange(val) {
      this.tableParams.pageSize = val + ''
      this.getList()
    },
    handleCurrentChange(val) {
      this.tableParams.page = val + ''
      this.getList()
    },
    // 复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取所属机构树状机构信息
    async getSelect() {
      const result = await getOrganization()
      this.treeData = JSON.parse(result.data)
      console.log(result)
    },
    // 获取工作模式树状机构信息
    async getWork() {
      const result = await getSchema()
      this.jobData = result.data[1]
      console.log(result)
    },
    // 搜索
    async btnSearch() {
      this.tableParams = { ...this.tableParams, ...this.form }
      // console.log(this.tableParams)
      await this.getList(this.tableParams)
      this.$message.success('搜索成功')
      delete this.tableParams.name
    },
    // 重置
    btnReset() {
      this.$refs.form.resetFields()
      this.pageParams = {
        page: 1,
        pageSize: 10
      }
      this.getList()
    },
    goBack() {
      this.$router.push(`/employee/grade/scheduling`)
    }
  }
}
</script>

<style scoped>
.top,
.bottom
{
 margin: 20px;
 padding: 30px;
}

.top ::v-deep .el-input {
 width: 380px;
 height: 40px;
}

.top ::v-deep .el-descriptions-item__container {
 line-height: 40px;
}

.top ::v-deep .organ {
 padding-left: 14px;
}

.top ::v-deep .btnGroup {
 margin-right: 0;
}

.top ::v-deep .el-descriptions-item__container {
 height: 45px;
}

</style>
